<template>
	<view class="header">
		<view class="header-item" v-for="(item,index) in headerTab" :key="item.id" @click="handleHeader(item.status)">
			<text :class="{active:headerActive==item.status}">{{item.title}}</text>
		</view>

	</view>
	<view class="order-list">
		<block v-for="(item,index) in pageData" :key="index">
			<view class="order-item" @click="bindOrderInfo(item)">
				<view class="top">
					<view class="">
						<image v-if="item.businessType ==1" src="/static/order-nianjian.png" mode=""></image>
						<image v-if="item.businessType ==3" src="/static/order-boyang.png" mode=""></image>
						<image v-else src="/static/shop.png" mode=""></image>
						<view style="">
							<text class="label">车搭档</text>
							<text class="value slh">{{item.orderNumber}}</text>
						</view>
						
					</view>
					<text class="status" v-if="headerActive==0">待付款</text>
					<text class="status" v-if="headerActive==1" style="color: #F3B00F;">待使用</text>
					<text class="status" style="color: #F3B00F;" v-if="headerActive==3&&item.evaluateFlag!=1">去评价</text>
					<text class="status" style="color: #16191B;" v-if="headerActive==3&&item.evaluateFlag==1">已完成</text>
				</view>
				<view class="content">
					<view class="left">
						<image src="/static/opder-tao.jpg" v-if="item.businessType ==1" mode=""></image>
						<image src="/static/opder-tao.jpg" v-if="item.businessType ==3" mode=""></image>
						<image src="/static/logo.png" v-if="item.businessType ==5" mode=""></image>
						<image src="/static/order-xiche.jpg" v-if="item.businessType ==2" mode=""></image>
						<image src="/static/opder-shop.jpg" v-if="item.businessType ==4" mode=""></image>
						<view class="">
							<text class="title">{{item.productInfoName}}</text>
							<!-- <text class="sub-title">小车</text> -->
						</view>
					</view>
					<view class="right">
						<text>￥{{item.payAmount / 100}}</text>
						<button class="btn" @click.stop="bindOrderPay(item)" v-if="headerActive==0">立即付款</button>
						<button class="btn" @click.stop="bindErCode(item)" v-if="headerActive==1">查看券码</button>
						<button class="btn" @click.stop="bindComment(item)" v-if="headerActive==3&&item.evaluateFlag!=1">去评价</button>
					</view>
				</view>
			</view>
		</block>
		<uni-empty v-if="emptyState"></uni-empty>
	</view>
</template>

<script setup>
	let bok = true
	import {
		ref
	} from 'vue';
	import {
		orderPageList,
		getSignupWeixin
	} from '@/api'
	import {
		onLoad,
		onReachBottom	,
		onShow,

	} from '@dcloudio/uni-app'
	import {
		wxOpenid,

	} from '@/utils/login-sdk.js'
	const loaded = ref(false)
	onLoad(async (params) => {
		const {
			memberId
		} = await wxOpenid()
		queryParams.value.memberId = memberId
		queryParams.value.businessType = params.businessType
		if (params.id) {
			headerTab.value.forEach((item, index) => {
				if (item.id == params.id) {
					headerActive.value = item.status
					queryParams.value.status = item.status

				}
			})
		}
		loaded.value = true
		getList()

	})
	onShow(()=>{
		if(loaded.value){
			getList()
		}
		
	})
	onReachBottom(()=>{
		queryParams.value.page++
		getList()
	})
	const emptyState = ref(false)
	const headerActive = ref(0)
	const headerTab = ref([{
			title: "待付款",
			id: "header-1",
			status:0
		},
		{
			title: "待使用",
			id: "header-2",
			status:1
		},
		// {
		// 	title: "待评价",
		// 	id: "header-3"
		// },
		{
			title: "已完成",
			id: "header-4",
			status:3
		},
	])
	const pageData = ref([])
	const queryParams = ref({
		"page": 1, //分页页码，数字类型
		"pageSize": 10, //分页条数
		"memberId": '', //会员ID
		"status": headerActive.value
	})
	/** 点击header*/
	const handleHeader = (index) => {
		headerActive.value = index
		queryParams.value.status = headerActive.value
		queryParams.value.page = 1
		getList()
	}
	/** 立即付款 */
	const bindOrderPay = async (item) => {
		if(!bok) return false
		bok = false
		const {
			openId
		} = await wxOpenid()
		const res = await getSignupWeixin({
			orderId: item.id,
			payAmount: item.payAmount,
			wxOpenId: openId
		})
		wx.requestPayment({
			timeStamp: res.result.sdk_timestamp,
			nonceStr: res.result.sdk_noncestr,
			package: res.result.sdk_package,
			signType: res.result.sdk_signtype,
			paySign: res.result.sdk_paysign,
			success(res) {
				bok = true
				getList()
			},
			fail(res) {
				bok = true
				uni.showToast({
					title: '支付取消',
					icon: "none"
				})
			}
		})
	}
	/** 查看券码 */
	const bindErCode = (item) => {
		uni.navigateTo({
			url: "/pages/ercode/ercode?orderId=" + item.id + '&code=' + item.orderNumber
		})
	}
	/** 门店详情 */
	const bindOrderInfo = (item) => {
		uni.navigateTo({
			url: "/pages/orderInfo/orderInfo?id="+item.id
		})
		
	}
	/** 去评价 */
	const bindComment = (item) => {
		uni.navigateTo({
			url: "/pages/comment/comment?memberId="+item.memberId+'&storeId='+item.storeId+'&preOrderId='+item.preOrderId+'&orderId='+item.id
		})
	}
	/** 订单列表 */
	const getList = async () => {
		const res = await orderPageList(queryParams.value)
		if(queryParams.value.page==1){
			pageData.value = res.result.list
		}else{
			pageData.value = pageData.value.concat(res.result.list)
		}
		
		if (pageData.value.length == 0) {
			emptyState.value = true
		} else {
			emptyState.value = false
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.header {
		height: 112rpx;

		padding: 0 57rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header-item {
			height: 112rpx;

			text {
				color: #8D8D8D;
				font-size: 32rpx;
				display: block;
				margin-top: 20rpx;
			}

			.active {
				color: #16191B;
			}

			.active::after {
				content: "";
				display: block;
				width: 54rpx;
				height: 7rpx;
				background: #FE9B23;
				border-radius: 4rpx;
				margin: 10rpx auto 0;

			}

		}

	}

	.order-list {
		margin-top: 24rpx;
		padding: 0 24rpx;

		.order-item {
			width: 630rpx;
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			margin-bottom: 18rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 54rpx;
						height: 54rpx;
						margin-right: 11rpx;
						flex-shrink: 0;
					}

					.label{
						font-size: 30rpx;
						color: #16191B;
					}
					.value {
						font-size: 30rpx;
						color: #16191B;
						width: 280rpx;
						display: block;
					}
				}

				.status {
					font-size: 28rpx;
					color: #ED4538;
				}
			}

			.content {
				margin-top: 23rpx;
				border-top: 2rpx solid #F2F2F2;
				padding-top: 31rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					image {
						width: 150rpx;
						height: 150rpx;
						background: #EDEDED;
						display: block;
						margin-right: 18rpx;
					}

					view {
						.title {
							color: #16191B;
							font-size: 30rpx;
							display: block;
						}

						.sub-title {
							color: #8E8E8E;
							font-size: 26rpx;
						}
					}
				}

				.right {
					text {
						font-size: 30rpx;
						color: #16191B;
						display: block;
						text-align: right;
					}

					.btn {
						width: 160rpx;
						height: 70rpx;
						background: #FE9B23;
						border-radius: 35rpx;
						display: block;
						font-size: 26rpx;
						color: #FEFFFF;
						margin-top: 43rpx;
						line-height: 70rpx;
					}
				}
			}
		}
	}
</style>